<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import { UserStore } from "@/store";
import { UserAxios } from "@/api";
import { useRouter } from "vue-router";
import { HomeAxios } from "@/api/home.ts";
import { Loading } from "vant";
import PubSub from "pubsub-js";
import { PubSubEnum } from "@/types";
const { t } = useI18n();
const router = useRouter();
const userStore = UserStore();
//1: 最近3小时，2：最近12小时，3：最近24天，4：最近48小时，5：最近7天
const selectList = reactive([
  { timeType: 1, time: 3, profit: "", recordNum: 0, initType: 0, bets: 0 },
  { timeType: 2, time: 12, profit: "", recordNum: 0, initType: 0, bets: 0 },
  { timeType: 3, time: 24, profit: "", recordNum: 0, initType: 0, bets: 0 },
  { timeType: 4, time: 48, profit: "", recordNum: 0, initType: 0, bets: 0 },
  { timeType: 5, time: 7, profit: "", recordNum: 0, initType: 0, bets: 0 },
]);
const initListData = ref<any>([]);
const selectType = ref(0);
const selectContent = ref("");
const selectTypeFun = (index, item) => {
  selectType.value = index;
  selectContent.value = item.time;
  getUserHourData(item.timeType, index);
  const textTime = index + 1 !== selectList.length ? t("gameLog.hour") : t("gameLog.days");
  selectContent.value = item.time + " " + textTime;
  getList();
};
onMounted(async () => {
  selectContent.value = selectList[0].time + " " + t("gameLog.hour");
  if (userStore.isLogin) {
    getUserHourData(selectList[0].timeType, 0);
  }
  getList();
});

const getList = async (loadMoreFlag = false) => {
  !loadMoreFlag && (queryParams.pageNo = 1);
  try {
    const { data } = await HomeAxios.queryGameOrderRecord({
      ...queryParams,
      timeType: selectType.value + 1,
    });
    if (data.length === 0 && loadMoreFlag) {
      PubSub.publish(PubSubEnum.SHOW_SUCCESS_TIP, {
        text: t("systemNotify.noMore"),
      });
      return (loading.value = false);
    }
    loadMoreFlag && (initListData.value = initListData.value.concat(data) || []);
    !loadMoreFlag && (initListData.value = data || []);
    loading.value = false;
    console.log("initList.value.................", initListData.value);
  } catch (error) {
    console.warn("error", error);
    loading.value = false;
  }
};
const getUserHourData = (timeType, index) => {
  UserAxios.getUserHourData({ timeType: timeType }).then(res => {
    selectList[index].initType = 1;
    selectList[index].recordNum = res.recordNum;
    selectList[index].bets = res.bets / 100;
    selectList[index].profit =
      res.profit < 0 ? "-" + Math.abs(res.profit) / 100 : (res.profit / 100).toString();
    console.log("是什么东西", res);
  });
};
const goToDetail = item => {
  router.push({
    path: "/gameDetail",
    query: { ...item, id: item.pGameIDStr, timeType: selectType.value + 1 },
  });
};
//
const queryParams = reactive({
  pageNo: 1,
  pageSize: 5,
});
const loading = ref(false);
const loadmore = () => {
  loading.value = true;
  queryParams.pageNo += 1;
  getList(true);
};
</script>
<template>
  <div class="frame-div">
    <!-- 游戏日志 -->
    <div class="content-frame">
      <div class="select-frame df">
        <div
          class="select-content df ai-center jc-center test-spacing"
          v-for="(item, index) in selectList"
          :class="{ 'dinfe-type': selectType == index }"
          :key="index"
          @click="selectTypeFun(index, item)"
        >
          {{ item.time }}
          {{ index + 1 != selectList.length ? t("gameLog.hour") : t("gameLog.days") }}
        </div>
      </div>
      <div class="card-frame">
        <div class="card-content df ai-center">
          <div>
            <div class="card-slogan df ai-center">
              {{ t("gameLog.lastData") }}
              <div class="test-spacing8">{{ selectContent }}</div>
            </div>
            <div class="card-slogan">
              <span
                >{{ t("gameLog.bet") }} {{ selectList[selectType].recordNum }}
                {{ t("gameLog.times") }}</span
              >:
              <text style="color: #ffffffa6">{{ selectList[selectType].bets }}</text>
            </div>
            <div class="card-slogan1">
              {{ t("gameLog.winOrLose") }}:
              <text style="color: #ffffffa6">{{ selectList[selectType].profit }}</text>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="slogan-frame" v-if="selectList[selectType].recordNum === 0"> -->
      <div class="slogan-frame" v-if="initListData.length === 0">
        <img class="activity-bottom" src="@/image/new_img/activity/no_data.svg" />
        <div class="slogan1">{{ t("gameLog.noRecordYet") }}</div>
        <div class="slogan2">
          {{ t("gameLog.slogan") }}
        </div>
      </div>
    </div>
    <div class="card-frame-modify">
      <div
        class="card-list-content"
        v-for="(item, index) in initListData"
        :key="index"
        @click="goToDetail(item)"
      >
        <div class="img-box">
          <img :src="item.gameLogo" />
        </div>
        <div class="flex-box">
          <div
            class="card-list-content-desc"
            style="
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              height: 48px;
            "
          >
            <div style="font-size: 16px; color: #dedce0">{{ item.gameName }}</div>
            <div class="">{{ "Faturamento " + (item.bets / 100).toFixed(2) }}</div>
          </div>
          <div
            class="card-list-content-desc"
            style="
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              height: 48px;
            "
          >
            <div class="" style="color: rgba(255, 255, 255, 0.65)">
              {{ (item.win / 100).toFixed(2) }}
            </div>
            <div class="">{{ item.vezes }} Vezes</div>
          </div>
          <img
            src="@/image/new_img/0205_sanjiao-90_jianbian.png"
            style="width: 20px; height: 20px"
          />
        </div>
      </div>
    </div>
    <div
      class="fc m-10 h-67"
      style="color: rgba(255, 255, 255, 0.45)"
      v-if="initListData.length > 0"
    >
      <Loading v-if="loading" />
      <div v-if="!loading" class="text_15" @click="loadmore">{{ t("generalTitle.loadMore") }}</div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.text_15 {
  font-size: 30px;
}
.fc {
  display: flex;
  justify-content: center;
  align-items: center;
}
.content-frame {
  width: calc(100% - 60px);
  margin-left: 27px;
  .select-frame {
    width: 100%;
    height: auto;
    margin-top: 36px;
    .select-content {
      flex: 1;
      height: 68px;
      font-size: 24px;
      color: rgba(255, 255, 255, 0.45);
      border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }
    .dinfe-type {
      color: #ab3fe7;
      border-bottom: 1px solid #ab3fe7;
    }
  }
}
.interval-frame {
  width: 100%;
  height: 80px;
}
.card-frame {
  width: 100%;
  height: 175.5px;
  border-radius: 20px;
  background-color: rgb(27, 10, 36);
  overflow: hidden;
  margin-top: 32px;
  border: 2px solid rgba(255, 255, 255, 0.15);
}
.card-content {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  border: 0.5px solid rgba(255, 255, 255, 0.15);
  padding-left: 28px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.card-slogan {
  font-size: 24px;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 21px;
}
.card-slogan1 {
  font-size: 24px;
  color: rgba(255, 255, 255, 0.45);
}
.test-spacing {
  letter-spacing: 2px;
}
.test-spacing8 {
  letter-spacing: 2px;
  margin-left: 4px;
}
.test-spacing-frame {
  letter-spacing: 5px;
}
.slogan-frame {
  width: 100%;
  text-align: center;
  margin-top: 37px;
}
.activity-bottom {
  width: 320px;
  height: 320px;
}
.slogan1 {
  margin-top: 16px;
  color: #969799;
  font-size: 28px;
}
.slogan2 {
  font-size: 24px;
  width: 450px;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
  margin: auto;
  margin-top: 32px;
  line-height: 26px;
}
.card-frame-modify {
  width: 100%;
  height: auto;
  padding: 0 32px;
  margin: 48px 0;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  font-size: 24px;
  flex-wrap: wrap;
}
.card-list-content {
  height: 165px;
  width: 100%;
  background-color: #24142d;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 33px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  color: #877e8c;
  margin-top: 22px;
}
.img-box {
  width: 97px;
  height: 97px;
}
.card-list-content img {
  width: 97px;
  height: 97px;
  border-radius: 100%;
}
.flex-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 15px;
  height: 95px;
  padding-right: 0px;
}
</style>
